<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相册展示</title>
    <!-- 公共 -->
    <script type="text/javascript" charset="utf-8" src="/common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/navbar.js"></script>

    <link rel="stylesheet" href="/common/css/swiper.min.css">
    <link href="css/showAlbum.css" rel="stylesheet" type="text/css">

    <script src="js/showAlbum.js"></script>
    <script src="/common/js/swiper.min.js"></script>
</head>

<body style="background-color: #f2f2f2;">
<div class="layui-card" id="photoListId">
    <div class="layui-card-body" >
        <div class="operaButtonGroup">
            <div class="coverImgWrapper">
                <img v-if="photoList.length == 0" class="coverImg" src="image/picNone.png" alt="封面" />
                <img v-if="photoList.length != 0" class="coverImg" :src="photoList[0].fileurl" />
            </div>
            <ul class="albumInfo">
                <li class="albumName"  title=""></li>
                <li class="photoCount">{{photoList.length}}张 /</li>
                <li class="albumPower"></li>
            </ul>
            <a class="layui-btn layui-btn-normal" id="uploadImg">上传照片</a>
            <a class="layui-btn layui-btn-normal" id="editImg">编辑</a>
            <a class="layui-btn layui-btn-primary" id="cancelEdit">取消编辑</a>
        </div>
        <div class="mngButtonGroup">
            <a class="layui-btn layui-btn-normal" id="sureDelete">删除</a>
            <a class="layui-btn layui-btn-normal" id="selectAll">全选</a>
        </div>
    </div>
    <div class="photoShowGallery">
        <span class='emptyAlbum' v-if="photoList.length == 0">相册为空</span>
        <ul class="photoList" v-if="photoList.length != 0">
            <li v-for="(item,index) of photoList"
                class="list-item"
                :key="index"
                @click="showPhotoDetail(index)"
            >
                <div class="list-item-wrapper">
                    <img class="photoItem" :src="item.fileurl.replace('.'+item.extendname,'_min.'+item.extendname)" alt="照片展示">
                    <div class="maskImg" @click.stop="handleSelectIcon(index)"></div>
                    <div class="selectIcon" :id="item.fileid" @click.stop="handleSelectIcon(index)"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="swiperWrapper">
        <!--退出按钮-->
        <button type="button" class="layui-btn layui-btn-sm exitButton">
            <i class="layui-icon layui-icon-close"></i>
        </button>
        <div class="changeWrapper" @click="totationImage(activePhotoInfo.fileid)" title="右转">
            <i class="layui-icon layui-icon-refresh"></i>
        </div>
        <!--轮播图渲染区域-->
        <div class="imgListWrapper"></div>
        <!--照片信息展示区域-->
        <div class="imgInfoWrapper">
            <div class="titleWrapper">
                <img class="userHeadImg" src="image/picNone.png" alt="用户头像"/>
                <div class="imgInfo">
                    <div class="imgInfoTop">
<!--                        <div class="swipperUserName">MAC的小公主</div>-->
<!--                        <div class="connentFont">的</div>-->
                        <div class="swipperPhotoName">{{activePhotoInfo.filename}}</div>
                    </div>
                    <div class="imgTime">{{activePhotoInfo.uploadtime}}</div>
                </div>
            </div>
            <div class="imgIntro">照片描述……</div>

            <div class="imgOperation">
                <span class="imgOperaIcon imgLike" title="点赞">
                    <i class="layui-icon layui-icon-praise"></i>
                </span>
                <span class="imgOperaIcon imgComments" title="评论">
                    <i class="layui-icon layui-icon-reply-fill"></i>
                </span>
                <span class="imgOperaIcon imgDelete" title="删除"
                      @click="deletePhoto(activePhotoInfo.imageurl,activePhotoInfo.fileid,activePhoto)">
                    <i class="layui-icon layui-icon-delete"></i>
                </span>
            </div>
            <div class="imgCommentsUserOpera">
                <div class="layui-form-item layui-form-text">
                    <div class="remark-list">
                        <div class="remark-item" v-for="(remark,index) of remarkList" style="padding-bottom: 15px;margin-top: 15px;">
                            <a class="remark-item-left" style="display: inline-block;padding-right: 10px;margin-bottom: 5px;">
                                <img class="img-xs" src="image/picNone.png" style="    width: 40px;">
                            </a>
                            <div class="remark-text" style="width: 440px;display: inline-block;">
                                <div>
                                    <a style="color: #0645e8;">{{remark.userBean.username}}</a>
                                    <div>{{remark.remarkDate}}</div>
                                </div>
                                <div>{{remark.remarkContent}}</div>
                                <a style="float: right" @click="clickReply(remark)">回复</a>
                            </div>
                            <div style="margin-left: 55px;background-color: #c4ffe6;">
                                <div v-for="(reply,index) of remark.replyList">
                                    <div class="replay-text" style="overflow: hidden;width: auto;display: inline-block;">
                                        <div>
                                            <a style="color: #0645e8;">{{reply.replyUserName}}</a>回复
                                            <a style="color: #0645e8;">{{reply.repliedUserName}}：</a>
                                            {{reply.replyContent}}

                                        </div>

                                    </div>
                                    <a style="float: right" @click="clickReply(reply)">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea" id="remarkInputId"></textarea>
                    </div>
                    <label class="layui-form-label layui-btn layui-btn-normal" onclick="remarkConfirm()">发表</label>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<!--模板引擎-->
<script type="text/html" id="swiperTemplate">
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            {{each list v i}}
            <div class="swiper-slide">
                <img class="bigImg" src="{{v.fileurl}}" alt="大图查看"
                     data-name="{{v.filename}}" data-time="{{v.uploadtime}}" />
            </div>
            {{/each}}
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            {{each list v i}}
            <div class="swiper-slide">
                <img class="thumbsImg" src="{{v.fileurl.replace('.'+v.extendname,'_min.'+v.extendname)}}" alt="缩略图" />
            </div>
            {{/each}}
        </div>
    </div>
</script>
</html>